<template>
  <div class="container">
    <!-- <el-page-header @back="goBack" content="预定信息"> </el-page-header> -->
    <div class="title">会 议 室</div>
    <div class="context">{{ form.name }}</div>
    <div class="title">会议室简介</div>
    <div class="context">{{ form.describe }}</div>
    <div class="title">会议时间</div>
    <div class="context">
      {{ form.dateTimeStr }}
      <el-button
        style="margin-left: 20px"
        size="mini"
        type="primary"
        @click="selectDateTime"
        >预 定 时 间</el-button
      >
    </div>
    <div style="color: #409eff" class="context">*会议预订后默认延时半小时</div>
    <div class="title">服务要求</div>
    <div class="context">
      <el-input
        type="textarea"
        :rows="5"
        placeholder="请输入内容"
        v-model="form.textarea"
      >
      </el-input>
    </div>
    <div class="submitButtom">
      <el-button
        type="primary"
        style="margin-left: 10%; width: 80%"
        @click="saveMeetingApply"
        >预 定</el-button
      >
    </div>
  </div>
</template>

<script>
import eventBus from '@/eventBus.js';
export default {
  data () {
    return {
      aaa: 'bbb',
      cRoom: null,
      form: {
        vid: '',
        id: '',
        name: '',
        describe: '',
        dateTimeStr: '请选择会议时间',
        date: '',
        startTime: '',
        endTime: '',
        textarea: '',
        // name: '',
        // region: '',
        // date1: '',
        // date2: '',
        // delivery: false,
        // type: [],
        // resource: '',
        // desc: ''
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    if (from.name === "ConferenceRoomDateTime") {
      next((vm) => {
        if (from.params.date) {
          vm.form.date = from.params.date
          vm.form.dateTimeStr = from.params.date
        }
        if (from.params.startTime) {
          vm.form.startTime = from.params.startTime
        }
        if (from.params.endTime) {
          vm.form.endTime = from.params.endTime
        }
        if (from.params.startTime && from.params.endTime) {
          vm.form.dateTimeStr += ' ' + from.params.startTime + '至' + from.params.endTime
        }
      })
    } if (from.name === "ConferenceRoomList") {
      next((vm) => {
        vm.form.vid = from.params.VID
        vm.form.name = from.params.cRoom.会议室名称
        vm.form.id = from.params.cRoom.ID
        vm.form.describe = from.params.cRoom.简介
      })
    } else {
      next()
    }
  },
  beforeRouteLeave (to, from, next) {
    this.clearForm()
    next()
  },
  methods: {
    async saveMeetingApply () {
      const _self = this;
      // info.VID, info.会议室编号, info.预订日期, info.开始时间, info.结束时间, info.服务需求);
      var parms = {
        VID: this.form.vid,
        会议室编号: this.form.id,
        预订日期: this.form.date,
        开始时间: this.form.startTime,
        结束时间: this.form.endTime,
        服务需求: this.form.textarea,
      }
      var isAbleC = true
      if (!parms.预订日期 || parms.预订日期 === '') {
        this.$message.warning('请选择预订日期');
        isAbleC = false
      }
      if (!parms.开始时间 || parms.开始时间 === '') {
        this.$message.warning('请选择会议开始时间');
        isAbleC = false
      }
      if (!parms.结束时间 || parms.结束时间 === '') {
        this.$message.warning('请选择会议结束时间');
        isAbleC = false
      }
      if (isAbleC) {
        await this.$Http.post('ConferenceRoom/saveMeetingApply', parms).then(res => {
          if (res.data.IsSucess) {
            this.$message.success('预定成功');
            _self.goBack()
          } else {
            this.$message.error('预定失败，' + res.data.Message);
          }
        }).catch(
          err => console.log(err)
        );
      }
    },
    selectDateTime () {
      this.$route.params.ID = this.form.id;
      this.$route.params.VID = this.form.vid,
      this.$route.params.date = this.form.date;
      this.$route.params.startTime = this.form.startTime;
      this.$route.params.endTime = this.form.endTime;
      this.$router.push({ path: '/ConferenceRoomDateTime' })
    },
    goBack () {
      this.clearForm()
      this.$router.go(-2);
    },
    clearForm () {
      this.form.dateTimeStr = '请选择会议时间'
      this.form.date = ''
      this.form.startTime = ''
      this.form.endTime = ''
      this.form.textarea = ''
    },
  }
}
</script>

<style lang="scss" scoped>
.title {
  padding: 20px 50px;
  font-size: 30px;
}
.context {
  padding: 20px 50px;
  font-size: 25px;
  color: #696969;
}
.submitButtom {
  width: 100%;
  height: 3rem;
}
.el-page-header {
  line-height: 100px;
  height: 100px;
  background-color: #409eff;
  margin-bottom: 30px;
  color: white;
}
</style>
